<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
  <h:head>
    <title>Facelet Title</title>
  </h:head>
  <h:body>
    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                    xmlns:h="http://java.sun.com/jsf/html"
                    xmlns:f="http://java.sun.com/jsf/core"
                    xmlns:c="http://java.sun.com/jsp/jstl/core"
                    xmlns:ace="http://www.icefaces.org/icefaces/components"
                    xmlns:icecore="http://www.icefaces.org/icefaces/core"
                    xmlns:ui="http://java.sun.com/jsf/facelets"
                    template="layout.xhtml">
      <ui:define name="title">Register / Awesome Dates</ui:define>
      <ui:define name="register" >
        <ui:include src="includes/registerForm.xhtml"/>
      </ui:define>
      <ui:define name="content">

        <ace:panel id="personalInfoInputPanel" header="Register" style="width:68%;">
          <h:form style=" width:100%;" id="Form" styleClass="btnRegisterLogin">
            <f:event listener="#{userManager.validatePassword}" type="postValidate" />

            <ace:textEntry id="username" label="Username" labelPosition="left"  requiredMessage="Username is required"  required="true" requiredIndicator="(*)" indicatorPosition="right" value="#{userManager.user.username}" style="margin-bottom:10px; width:150px">
              <f:validateLength minimum="5" maximum="45" />
              <f:validateRequired />
            </ace:textEntry><br/>

            <ace:textEntry id="newPasswordUpdateInput" label="Password" labelPosition="left"  requiredMessage="Password is required"  required="true" requiredIndicator="(*)" indicatorPosition="right" secret="true" value="#{userManager.user.password}" style="margin-bottom:4px; width:150px">
              <f:validateLength minimum="6" maximum="45" />
              <f:validateRequired />
            </ace:textEntry><br/>

            <ace:textEntry id="newPasswordAgainUpdateInput" label="Confirm Password" labelPosition="left"  requiredMessage="Password is required"  required="true" requiredIndicator="(*)" indicatorPosition="right" secret="true" style="margin-bottom:10px; width:150px">
              <f:validateLength minimum="6" maximum="45" />
              <f:validateRequired />
            </ace:textEntry><br/>


            <ace:textEntry id="email" value="#{userManager.user.email}" label="Email" labelPosition="left" pattern="^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$" style="margin-bottom:10px;" requiredMessage="Password is required"  required="true" requiredIndicator="(*)" indicatorPosition="right" validatorMessage="Email is not valid">
              <f:validateLength minimum="6" maximum="45" />
              <f:validateRequired />
            </ace:textEntry><br/>

            <ace:simpleSelectOneMenu value="#{userManager.user.sex}" style="margin-bottom:10px;" label="I'm a" labelPosition="left"> 
              <f:selectItem itemValue="Male" itemLabel="Male" /> 
              <f:selectItem itemValue="Female" itemLabel="Female" /> 
            </ace:simpleSelectOneMenu><br/>

            <h:panelGrid columns="3">
              <ace:simpleSelectOneMenu value="#{userManager.user.age}" label="Birth year" labelPosition="left" style="display:inline; margin-bottom:10px">
                <f:selectItems value="#{userManager.chiffreAnnee}"></f:selectItems>
              </ace:simpleSelectOneMenu>
            </h:panelGrid>

            <h:commandButton id="btnSubmit" value="Register" action="#{userManager.createUser}"></h:commandButton> 
            <h:messages globalOnly="true" rendered="false"/>
            <ace:growlMessages position="bottom-right" hideEffectDuration="8000" ></ace:growlMessages>


          </h:form>
          <h:form styleClass="btnRegisterLogin">
            <h:commandButton id="retourLogin" value="Login" action="main"></h:commandButton>
          </h:form>
        </ace:panel>
      </ui:define>
    </ui:composition>
  </h:body>
</html>

